---
title: "How we are sending notifications easy with Novu"
publishedAt: "2024-04-29"
summary: "Midday is all about being on top of your business. Stay informed about your business insights, track when you get paid, receive updates on new transactions"
image: "/images/novu.png"
tag: "Engineering"
---

Midday is all about being on top of your business. Stay informed about your business insights, track when you get paid, receive updates on new transactions, and access general information how your business actually are doing. And that includes well-timed notifications via emails and push notifications, carefully curated for your convenience.

<br />
### The challenge: Implementing a unified infrastructure for notifications

From the beginning, we knew the importance of a unified approach to managing our notifications. From past experiences of stitching together different solutions to support various notification needs, we were determined to create a system that could seamlessly support web, desktop, and mobile applications. Our goal is to ensure that our notification system can scale alongside our growth.

<br />
### The solution: Novu

While we tried a bunch of different providers we decided to
go with Novu based on our requirements:

- Support Resend, Expo
- In App notifications
- User Preferences

<br />
Novu not only ticked every box they also got a huge bonus for being open source and
you get 30K events/month for free.

<br />
### Implementation and SDKs

We started with created our own package `@midday/notifications` where
we installed `@novu/node` dependency, where we register our notification
types for convenience:

```typescript
// Our notification templates
export enum Templates {
  Transaction = "transaction",
  Transactions = "transactions",
  Inbox = "inbox",
  Match = "match",
}

// Our notification types (email|in-app)
export enum Events {
  TransactionNewInApp = "transaction_new_in_app",
  TransactionsNewInApp = "transactions_new_in_app",
  TransactionNewEmail = "transaction_new_email",
  InboxNewInApp = "inbox_new_in_app",
  MatchNewInApp = "match_in_app",
}
```

And using our [New Transactions email](https://email.midday.ai/preview/transactions) as an example, which is sent from a background job using Trigger.dev when you have new transactions.

```typescript
import { Notifications, Types, Events } from "@midday/notifications";

// Generate html from react-email
const html = await renderAsync(
  TransactionsEmail({
    fullName: user.full_name,
    transactions,
    locale: user.locale,
  })
);

await Notifications.trigger({
  name: Events.TransactionNewEmail,
  payload: {
    type: Types.Transaction,
    subject: t("transactions.subject"),
    html,
  },
  user: {
    subscriberId: user.id,
    teamId: team_id,
    email: user.email,
    fullName: user.full_name,
    avatarUrl: user.avatar_url,
  },
});
```

Because we are sending the email with the variables `subject` and `html` with the generated content we are just adding those to Novu and then we're done.

<br />
![Novu - Variables](/images/variables.png)

<br />
And to send In App Notifications it's just a matter of changing the `Events` and
`Types`.

```typescript
import { Notifications, Types, Events } from "@midday/notifications";

await Notifications.trigger({
  name: Events.TransactionNewInApp,
  payload: {
    recordId: transaction.id,
    type: Types.Transaction,
    description: t("notifications.transaction", {
      from: transaction.name,
    }),
  },
  user: {
    subscriberId: user.id,
    teamId: team_id,
    email: user.email,
    fullName: user.full_name,
    avatarUrl: user.avatar_url,
  },
});
```

<br />
### The results: Beautiful In App Notificaitons and Emails
<br />
![Midday - In App Notifications](/images/notification-center.gif)
<br />
Thanks to the SDK `@novu/headless` we implemented the notification center for Midday
in a matter of hours to match our branding exacly like we wanted while Novu delivers
the notifications in realtime.

<br />

And for user preferences we just use their API together with a simple server action.

<br />
![Midday - In App Notifications](/images/notification-settings.gif)

<br />
### The future of Midday x Novu

We are really happy that we chose to use Novu, We have several smart notifications planned that will offer valuable business insights. Plus, Novu will integrate smoothly with our upcoming mobile app, allowing us to send push notifications effortlessly via Expo by just connecting a new provider.

<br />
### GitHub

While this is just a draft on how we are using Novu in production you can dig deeper into the codebase in our [repository](https://git.new/midday).
